<template>
  <div>
    <h2>计算属性</h2>
    <input type="text" v-model="xing">
    <input type="text" v-model="ming">
    <h2>多次调用计算属性</h2>
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>
    <p>{{fullName}}</p>

    <h2>多次调用methods中的方法</h2>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>
    <p>{{getName()}}</p>


  </div>
</template>

<script>
export default {
  data(){
    return{
      xing:'张',
      ming:'三'
    }
  },
  //计算属性，要写到data 平级的 computed 里
  computed:{
    //所有的计算属性，都放到这里（计算属性必须返回计算的结果）
    fullName(){
      console.log('调用了计算属性');
      return this.xing + this.ming
    }
  },
  methods:{
    getName(){
      console.log('调用了方法');
      return this.xing + this.ming
    }
  }
}
</script>

<style>

</style>